<template>
  <div class="container">
    <el-tabs v-model="tabType" type="card" class="demo-tabs">
      <el-tab-pane v-for="item in tabData" :key=item.name :label="item.label" :name="item.name">
      </el-tab-pane>
    </el-tabs>
    <div class="tab-content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup name="dataLoaderSubject">
const tabType = ref('0')
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const tabData = ref([
  { label: '空间数据入库', name: '0' },
  { label: '其他数据入库', name: '1' },
])

const curKey = ref('')
watch(() => route, () => {
  curKey.value = route.name
  if (route.path.includes('spatialData')) {
    tabType.value = '0'
  } else if (route.path.includes('otherData')) {
    tabType.value = '1'
  }
}, { deep: true, immediate: true })
watch(() => tabType.value, (newVal, oldVal) => {
  const { id, name } = route.query
  let curKey = ''
  if(!['spatialData', 'otherData'].includes(route.name)){
    curKey = route.name
  }
  if (newVal == '0') {
    router.push({ path: '/businessManage/dataLoader/subject/spatialData', query: { id, name } })
  } else {
    router.push({ path: '/businessManage/dataLoader/subject/otherData', query: { id, name, curKey: curKey || 'imageArchive' } })
  }
}, { immediate: true })
</script>
<style lang="scss" scoped>
.container {
  height: 100%;

  .tab-content {
    height: calc(100% - 56px);
  }
}
</style>
